// eslint-disable-next-line no-unused-vars
import { getSensorLedger, getRtSensorEvaluate, getRtSensorAlarm, getRtSensorState } from '@/api/system/sensor2'
import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/map'
import 'echarts/lib/chart/radar'
import 'echarts/lib/chart/scatter'
import 'echarts/lib/chart/effectScatter'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/geo'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/title'
import 'echarts/lib/component/visualMap'
import 'echarts/lib/component/dataset'
import 'zrender/lib/svg/svg'
// import elementResizeDetectorMaker from "element-resize-detector"
import { THEME_KEY } from 'vue-echarts'

export default {
  name: 'HelloWorld',
  components: {
    chart: ECharts
  },
  props: [],
  provide: {
    [THEME_KEY]: 'shine'
  },
  data() {
    return {
      devStatusData: [],
      intelliWarningData: [],
      standingBookData: [],
      form: [],
      pieData: {
        title: {
          text: 'Traffic Sources',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        // legend: {
        //   orient: "vertical",
        //   left: "left",
        //   data: [
        //     "Direct",
        //     "Email",
        //     "Ad Networks",
        //     "Video Ads",
        //     "Search Engines"
        //   ]
        // },
        series: [
          {
            name: 'Traffic Sources',
            type: 'pie',
            radius: ['55%', '65%'],
            center: ['50%', '60%'],
            data: [
              { value: 35, name: 'Direct' },
              { value: 310, name: 'Email' },
              { value: 234, name: 'Ad Networks' },
              { value: 135, name: 'Video Ads' },
              { value: 1548, name: 'Search Engines' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      option_column2: {
        title: { text: 'Column Chart' },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      },
      overall_merit: require('@/assets/img/圆1.png'),
      backgroudImg: require('@/assets/img/圆1.png'),
      backgroudImg2: '',
      Dstatus: [require('@/assets/img/圆4.png'), require('@/assets/img/圆2.png'), require('@/assets/img/圆3.png')],
      id: '',
      params: {
        id: ''
      }

    }
  },
  computed: {},
  watch: {
    '$route.params': {

      handler(new_value, old_value) {
        this.id = this.$route.params.id
        // console.log(this.$route.params.id)
        // this.dev_id = new_value.key('id')
        // console.log(this.params)
        this.params.id = this.id
        // 台账
        getSensorLedger(this.params).then(response => {
          // console.log(response.data)
          this.standingBookData = response.data
          console.log(this.standingBookData)
        })
        // 智能告警
        getRtSensorAlarm(this.params).then(response => {
          this.form = response.data
          // console.log(response)
        })
        // 综合评价
        getRtSensorEvaluate(this.params).then(response => {
          // console.log(response.data[0].state)
          var tmp_stat = response.data[0].state
          if (tmp_stat === '正常') { this.overall_merit = this.Dstatus[0] } else if (tmp_stat === '告警') { this.overall_merit = this.Dstatus[2] } else if (tmp_stat === '故障') { this.overall_merit = this.Dstatus[1] }
        })
        // 设备状态
        getRtSensorState(this.params).then(response => {
          // console.log(response.msg)
          // console.log(response.data.msg)
          this.devStatusData = response.data
        })
      }
    }

  },
  created() {
    this.id = this.$route.params.id
    console.log(this.$route.params.id)
    // this.dev_id = new_value.key('id')
    console.log(this.params)
    this.params.id = this.id
    // 台账
    getSensorLedger(this.params).then(response => {
      console.log(response.data)
      this.standingBookData = response.data
    })
    // 智能告警
    getRtSensorAlarm(this.params).then(response => {
      this.form = response.data
      console.log(response)
    })
    // 综合评价
    getRtSensorEvaluate(this.params).then(response => {
      console.log(response.data[0].state)
      var tmp_stat = response.data[0].state
      if (tmp_stat === '正常') { this.overall_merit = this.Dstatus[0] } else if (tmp_stat === '告警') { this.overall_merit = this.Dstatus[2] } else if (tmp_stat === '故障') { this.overall_merit = this.Dstatus[1] }
    })
    // 设备状态
    getRtSensorState(this.params).then(response => {
      // console.log(response.msg)
      // console.log(response.data.msg)
      this.devStatusData = response.data
    })
  },
  mounted: function() {
    window.addEventListener('resize', this.$_elTableMinxin_resetLayout)
  },
  destroyed: function() {
    window.removeEventListener('resize', this.$_elTableMinxin_resetLayout)
  },

  methods: {
    // 状态字体改变颜色
    changeColor(value) {
      if (value === '正常') {
        return 'color:RGB(32,255,2)'
      }
      if (value === '故障') {
        return 'color:RGB(255,20,2)'
      }
      if (value === '告警') {
        return 'color:RGB(255,181,2)'
      }
    },
    t_tableRowClassName({ row, rowIndex }) {
      if ((rowIndex + 1) % 2 === 0) {
        return 'Transformer-warning-row'
      } else {
        return 'Transformer-transparent-row'
      }
    },
    headerClass() {
      const styleObject = {
        'text-align': 'center',
        'font-weight': 'bolder',
        'background-color': 'rgb(7,45,69)',
        'border-bottom': '0px rgb(103, 194, 58) solid'
      }
      return styleObject
    },
    $_elTableMinxin_resetLayout() {
      this.$nextTick(() => {
        if (this.$refs.table) {
          this.$refs.table.doLayout()
        }
      })
    }

  }
}
